<template>
	<view class="container">
		<form class="form" v-if="isLogin">
			<view class="logo-container">
				<image src="../../static/imges/logo.png" mode="aspectFit" class="logo"></image>
			</view>
			<view class="title">企业考勤管理系统</view>
			<view class="subtitle">欢迎登录</view>
			
			<view class="input-wrap">
				<view class="input-icon">
					<image src="../../static/imges/username.png" alt="用户名" />
				</view>
				<input type="text" placeholder="请输入员工账号" v-model.trim="username" />
			</view>
			<view class="input-wrap">
				<view class="input-icon">
					<image src="../../static/imges/password.png" alt="密码" />
				</view>
				<input type="password" placeholder="请输入密码" v-model.trim="password" />
			</view>
			<button class="primary-btn" @click="handleLogin">登录系统</button>
			<view class="tip" @click="toggleForm">还没有账号？去注册</view>
		</form>
		
		<form class="form" v-else>
			<view class="logo-container">
				<image src="../../static/imges/logo.png" mode="aspectFit" class="logo"></image>
			</view>
			<view class="title">企业考勤管理系统</view>
			<view class="subtitle">员工注册</view>

			<view class="input-wrap">
				<view class="input-icon">
					<image src="../../static/imges/username.png" alt="用户名" />
				</view>
				<input type="text" placeholder="请输入员工账号" v-model.trim="username" />
			</view>
			<view class="input-wrap">
				<view class="input-icon">
					<image src="../../static/imges/password.png" alt="密码" />
				</view>
				<input type="password" placeholder="请输入密码" v-model.trim="password" />
			</view>
			<view class="input-wrap">
				<view class="input-icon">
					<image src="../../static/imges/password.png" alt="确认密码" />
				</view>
				<input type="password" placeholder="请再次输入密码" v-model.trim="confirmPassword" />
			</view>
			<view class="photo-upload">
				<view class="photo-title">员工照片</view>
				<view class="photo-container">
					<button class="upload-btn" @click="chooseImage">选择照片</button>
					<image v-if="photo" :src="photo" class="preview-image" mode="aspectFill"></image>
				</view>
			</view>
			<button class="primary-btn" @click="handleRegister">完成注册</button>
			<view class="tip" @click="toggleForm">已有账号？去登录</view>
		</form>
		
		<view class="footer">
			<text>© 2023 企业考勤管理系统</text>
		</view>
	</view>
</template>

<script>
	import request from '@/utils/request.js';
	export default {
		data() {
			return {
				isLogin: true, // 是否显示登录表单
				username: '',
				password: '',
				confirmPassword: '',
				photo: null,
				grade: 1,
				gradeList: ['大一', '大二', '大三', '大四'],
				selectedGradeIndex: 0,
			};
		},
		computed: {
			selectedGrade() {
				return this.gradeList[this.selectedGradeIndex];
			},
		},
		created(){
			if(uni.getStorageSync('token') != ''){
				uni.redirectTo({
					url:'/pages/index/index'
				})
			}
		},
		methods: {
			onChangeGrade(e) {
				this.selectedGradeIndex = e.detail.value;
			},
			// 切换登录/注册表单
			toggleForm() {
				this.isLogin = !this.isLogin;
			},

			// 处理登录操作
			handleLogin() {
				console.log('开始登录，用户名:', this.username);
				
				// 表单验证
				if (!this.username || !this.password) {
					uni.showToast({
						title: '用户名和密码不能为空',
						icon: 'none'
					});
					return;
				}
				
				request.post('/student/login', {
						studentName: this.username,
						passwd: this.password
					})
					.then(res => {
						console.log('登录响应:', res);
						let token = res.data;
						
						if (token && token !== '') {
							console.log('登录成功，获取到token');
							// 保存用户信息到本地缓存
							uni.setStorageSync('token', token);
							
							// 跳转到首页
							console.log('准备跳转到首页');
							uni.reLaunch({
								url: '/pages/index/index',
								success: function() {
									console.log('跳转成功');
								},
								fail: function(err) {
									console.error('跳转失败:', err);
									// 尝试使用其他跳转方式
									uni.switchTab({
										url: '/pages/index/index'
									});
								}
							});
						} else {
							console.log('登录失败，token为空');
							// 登录失败，提示错误信息
							uni.showToast({
								title: '用户名或密码不正确',
								icon: 'none'
							});
						}
					})
					.catch(err => {
						console.error('登录请求失败:', err);
						uni.showToast({
							title: '登录失败，请检查网络连接',
							icon: 'none'
						});
					});
			},

			// 处理注册操作
			handleRegister() {
				let param = {
					studentName: this.username,
					passwd: this.password,
					confirmPassword: this.confirmPassword,
					signPhoto: this.photo,
					grade: this.selectedGradeIndex - 0 + 1,
				};

				// TODO: 处理注册逻辑
				request.post('/student/register', param).then(res => {
					console.log('注册结果:', res);
					if (res.success) {
						uni.showToast({
							title: '注册成功，请登录',
							icon: 'none'
						});
						this.isLogin = true;
						this.username = '';
						this.password = '';
						this.confirmPassword = '';
						this.photo = '';
						this.grade = '';
					}
				});
			},

			// 处理上传头像

			chooseImage() {
				console.log('文件上传1');
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'],
					success: (res) => {
						this.src = res.tempFilePaths[0]
						uni.getFileSystemManager().readFile({
							filePath: this.src,
							encoding: 'base64',
							success: r => {
								this.photo = `data:image/png;base64,${r.data}`;
							}
						});
					}
				});
			}
		},
	};
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		min-height: 100vh;
		background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
		padding: 30rpx;
	}

	.logo-container {
		display: flex;
		justify-content: center;
		margin-bottom: 20rpx;
	}

	.logo {
		width: 120rpx;
		height: 120rpx;
	}

	.form {
		width: 100%;
		max-width: 650rpx;
		padding: 50rpx 40rpx;
		border-radius: 16rpx;
		box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.1);
		background-color: #ffffff;
		position: relative;
		animation: fadeIn 0.5s ease-in-out;
	}

	@keyframes fadeIn {
		from { opacity: 0; transform: translateY(20rpx); }
		to { opacity: 1; transform: translateY(0); }
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
		text-align: center;
		color: #333;
	}
	
	.subtitle {
		font-size: 28rpx;
		color: #666;
		text-align: center;
		margin-bottom: 40rpx;
	}

	.input-wrap {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		background-color: #f8f8f8;
		border-radius: 12rpx;
		padding: 8rpx 20rpx;
		transition: all 0.3s;
		border: 1px solid #eaeaea;
	}

	.input-wrap:focus-within {
		border-color: #4f99ff;
		background-color: #fff;
		box-shadow: 0 0 10rpx rgba(79, 153, 255, 0.1);
	}

	.input-icon {
		padding: 15rpx;
	}

	.input-wrap image {
		width: 40rpx;
		height: 40rpx;
	}

	.input-wrap input {
		flex: 1;
		height: 80rpx;
		font-size: 28rpx;
		color: #333;
	}

	.photo-upload {
		margin-bottom: 30rpx;
	}

	.photo-title {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 15rpx;
	}

	.photo-container {
		display: flex;
		align-items: center;
	}

	.upload-btn {
		height: 80rpx;
		line-height: 80rpx;
		background-color: #f8f8f8;
		color: #555;
		font-size: 28rpx;
		border-radius: 12rpx;
		border: 1px solid #eaeaea;
		padding: 0 30rpx;
	}

	.preview-image {
		width: 120rpx;
		height: 120rpx;
		margin-left: 20rpx;
		border-radius: 8rpx;
		border: 1px solid #eaeaea;
	}

	.primary-btn {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 12rpx;
		background: linear-gradient(to right, #4f99ff, #6ba6ff);
		color: #ffffff;
		font-size: 32rpx;
		font-weight: 500;
		margin-top: 40rpx;
		box-shadow: 0 8rpx 15rpx rgba(79, 153, 255, 0.2);
		transition: all 0.3s;
	}

	.primary-btn:active {
		transform: scale(0.98);
		box-shadow: 0 4rpx 8rpx rgba(79, 153, 255, 0.15);
	}

	.tip {
		margin-top: 30rpx;
		text-align: center;
		color: #4f99ff;
		font-size: 28rpx;
		cursor: pointer;
	}

	.footer {
		margin-top: 40rpx;
		text-align: center;
		color: #999;
		font-size: 24rpx;
	}
</style>